<template>
	<view class="bigblock">
		<scroll-view class="scroll" refresher-background="#fff;" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" scroll-y="true" refresher-enabled="true">
			<view class="bigbox">
				<view class="hangqing">
					<div class="toplines">
						<div class="line1">
							交易对
						</div>
						<div class="line2">
							最新价
						</div>
						<div class="line3">
							24小时涨跌幅
						</div>
					</div>
					<div class="contentlines">
						<!-- @tap="kline(item.address)" -->
						<div class="line" >
							<div class="line1">
								<image class="tokenimg" src="@/static/images/gaficon.png" mode="widthFix"></image>
								<p  class="dui">USDT/HEC</p>
							</div>
							<div class="line2">
								1
							</div>
							<div class="line3">
								<!-- <p class="green" v-if="Number(item.rate)>0">+{{(Number(item.rate)*100).toFixed(2)}}%</p> -->
								<p class="red" >{{(1*100).toFixed(2)}}%</p>
							</div>
						</div>
					</div>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var this_;
	export default {
		data() {
			return {
				list: [],
				selectedaddress: uni.getStorageSync('selectedaddress'),
				selectedchain: uni.getStorageSync('selectedchain'),
				triggered: true
			}
		},
		watch: {},
		mounted() {
			this_ = this
			this_.getdata()
		},
		methods: {
			getdata() {
		
			},
			// 下拉刷新功能
			onRefresh() {
				this_.triggered = false
				this_.getdata()

			},
			kline: function(pairaddress) {
				if (pairaddress != '0xEf9C2d7D9C403bdEB03c06FBB1c4D441885A5686') {
					uni.navigateTo({
						url: '/pages/index/index?pairaddress=' + pairaddress + '&useraddress=' + this
							.selectedaddress.address + '&posturl=' + this.$config.requireurl + '/kline'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index3/index?pairaddress=' + pairaddress + '&useraddress=' + this
							.selectedaddress.address + '&posturl=' + this.$config.requireurl + '/kline'

					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.bigblock {
		height: 100%;
		padding-top: 200upx;
		box-sizing: border-box;

		.scroll {
			height: 100%;
		}
	}

	.bigbox {
		height: 100%;

		.hangqing {
			background-color: #fff;
			width: 720upx;
			margin: 0upx auto;
			border-radius: 36upx;
			box-sizing: border-box;
			padding: 0upx 20upx;
			padding-bottom: 40upx;
			padding-top: 40upx;

			.toplines {
				display: flex;
				justify-content: space-between;
				// padding:20upx;
				font-size: 28upx;

				.line1 {
					width: 43%;
				}

				.line2 {
					width: 25%;
					margin-left: 2%;
					text-align: center;
				}

				.line3 {
					width: 28%;
					margin-left: 2%;
					display: flex;
					justify-content: right;
				}
			}

			.contentlines {
				margin-top: 20upx;
				color: #222;

				.line {
					display: flex;
					font-size: 32upx;
					align-items: center;
					margin-top: 50upx;

					.line1 {
						width: 43%;
						display: flex;
						align-items: center;

						.tokenimg {
							width: 80upx;
							// height: 150upx;
						}

						.dui {
							margin-left: 20upx;
							font-size: 32upx;
						}
					}

					.line2 {
						width: 25%;
						margin-left: 2%;
						text-align: center;
					}

					.line3 {
						width: 28%;
						margin-left: 2%;
						display: flex;
						justify-content: right;

						p {
							width: 70%;
							line-height: 50upx;
							color: #fff;
							text-align: center;
							border-radius: 10upx;
							margin-left: 20%;
							font-size: 24upx;
						}

						.green {
							background-color: #33BD82;
						}

						.red {
							background-color: #F5465C;
						}
					}
				}

			}
		}
	}
</style>